<template>
  <view class="page-bg prize">
    <page-header></page-header>
    <view class='topblock mc-space-between mc-flex-vcenter'>
      <view class="topblock-left">
        <title>奖品区</title>
        <view class="gift_number mc-flex mc-flex-vcenter">
          <image src='/static/images/ui_liwu_xitubiao.png'></image>
          <text>当前剩余：{{tntegralNum}}张</text>
        </view>
      </view>
      <image src="../../../../static/images/ui_liwu_hezi.png" mode="widthFix" class="topblock-right"></image>
    </view>
    <view v-for="(value,index) in _prizeList" :key="index" class="list_block mc-space-between mc-flex-vcenter" :class="value.type==2?'exchange-prize-btn1':'exchange-prize-btn2'">
      <image src="../../../../static/images/ui_liwu_pifu01.png" mode="widthFix" v-if="value.type==2"></image>
      <image src="../../../../static/images/ui_liwu_Qbi01.png" mode="widthFix" v-else></image>
      <text>{{value.productName||''}}</text>
	  <form report-submit="true" @submit="setFormId">
		<button form-type="submit" @tap="toExchange(index)">兑换</button>
	  </form>
    </view>
    <view class='list_block mc-space-between mc-flex-vcenter exchange-prize-btn3'>
      <image src="../../../../static/images/ui_liwu_gengduo01.png" mode="widthFix"></image>
      <text>更多产品，陆续开放</text>
    </view>
    <view class="margin-top36 margin-bottom36">
	  <banner-ad></banner-ad>
    </view>
  </view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
export default {
  name: 'more',
  props: {
    d: {
      type: Object
    }
  },
  components: {},
  data() {
    return {};
  },
  watch: {},
  computed: {
    ...mapGetters('user', ['_gameInfo']),
    ...mapGetters('common', ['_prizeList']),
    tntegralNum: function() {
      return this._gameInfo.tntegralNum || 0;
    }
  },
  methods: {
    ...mapActions('common', ['prizeListLoad']),
    ...mapActions('user', ['gameInfoUp']),
    toExchange(index) {
      let url = '';
      const listStr = JSON.stringify(
        this._prizeList[index].productCategoryList
      );
      if (this._prizeList[index].type == 1) {
        url = '../qbi/qbi?list=' + listStr;
      } else if (this._prizeList[index].type == 2) {
        url = '../skin/skin?list=' + listStr;
      }
      if (url)
        uni.navigateTo({
          url
        });
    },
	setFormId(e){
		this.$store.dispatch('common/formIdListUp', { e:e, isSave:true })
	}
  },
  created() {},
  mounted() {
    if (!this._prizeList || this._prizeList.length == 0) this.prizeListLoad();
    if (!this._gameInfo) {
      this.gameInfoUp();
    }
  }
};
</script>

<style lang="scss" scoped>
.topblock {
  width: 100%;
  padding: 160rpx 20rpx 0 70rpx;
  box-sizing: border-box;
  margin-bottom: -70rpx;
}

.topblock-left {
  flex: auto;
}

.topblock-right {
  width: 370rpx;
  flex: none;
}

.topblock title {
  font-size: 48rpx;
  color: #fff;
}

.gift_number {
  position: relative;
  margin-top: 20rpx;
}

.gift_number image {
  width: 32rpx;
  height: 32rpx;
}

.gift_number text {
  color: #fff;
  font-size: 28rpx;
  line-height: 40rpx;
  margin-left: 10rpx;
}

.list_block {
  width: 679rpx;
  height: 150rpx;
  border-radius: 10rpx;
  margin: 30rpx auto;
  // border: solid 1px #000;
  position: relative;
  box-sizing: border-box;
  padding: 20rpx 40rpx;

  image {
    width: 108rpx;
    flex: none;
  }

  text {
    color: #fff;
    // text-shadow: 3px 2px 2px #000;
    font-weight: bold;
    margin: 20rpx;
    flex: auto;
  }

  button {
    margin: 0;
    width: 150rpx;
    border-radius: 100px;
    font-size: 30rpx;
    font-weight: bold;
    // box-shadow: 0 3px 3px #b2b2b2;
    flex: none;
  }
}
</style>
